$(function () {
  var layer = layui.layer;
var form = layui.form;//4.3
  initArtCateList();

  // 1获取文章分类的列表
  function initArtCateList() {
    $.ajax({
      method: "GET",
      url: "/my/article/cates",
      // 使用模板引擎渲染数据
      success: function (res) {
        // console.log(res);
        var htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
      },
    });
  }

  // 2为添加类别的按钮绑定点击事件
  // 3.2添加成功 关闭弹出层 用index
  var indexAdd = null;
  $("#btnAddCate").on("click", function () {
    indexAdd = layer.open({
      //   0默认为信息框   1页面层 3加载层 4tips层
      type: 1,
      // 弹出层的宽高
      area: ["500px", "250px"],
      title: "添加文章分类",
      // 将HTML标签放个script脚本用来获取要渲染的HTML结构再赋值给content
      content: $("#dialog-add").html(),
    });
  });

  // 3.1通过代理的形式 为form-add表单绑定submit事件

  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    // console.log('ok');
    $.ajax({
      method: "post",
      url: "/my/article/addcates",
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("新增分类失败!");
        }
        initArtCateList();
        console.log(res);
        layer.msg("新增分类成功!");
        // 3.3根据索引关闭对应的弹出层
        layer.close(indexAdd);
      },
    });
  });

//   4.1通过代理的方式 为btn-edit按钮绑定点击事件
var indexEdit = null;
$('tbody').on('click','.btn-edit' ,function(){

    // console.log('ok');
    // 4.2弹出修改文章分类信息层
    indexAdd = layer.open({
        //   0默认为信息框   1页面层 3加载层 4tips层
        type: 1,
        // 弹出层的宽高
        area: ["500px", "250px"],
        title: "添加文章分类",
        // 将HTML标签放个script脚本用来获取要渲染的HTML结构再赋值给content
        content: $("#dialog-edit").html(),
    });


    
var id = $(this).attr('data-id');
// console.log(id);
// 4.3发起请求获取对应分类的数据
$.ajax({
  method: 'GET', 
  url:'/my/article/cates/' + id,
  success:function(res){
    // lay-filter 对应 "form-edit" 用form val()快速为表单填充数据
    form.val('form-edit',res.data);
    // 更新文章分类数据要根据id 所以表单要先保存数据对应的id 不需看见用隐藏域保存
  }
})

// 4.4


})


//通过代理的形式 为修改分类的表单绑定submit事件 更新文章分类数据 
// 5.1 为submit监听提交事件
$('body').on('submit','#form-edit',function (e) {
// 5.2 阻止默认提交行为 
  e.preventDefault();
// 5.3手动发起ajax请求 将用户填写的数据提交到服务器 
  $.ajax({
    method: 'POST',
    url:'/my/article/updatecate',
// 5.4快速拿到表单数据
    data: $(this).serialize(),
    success:function(res){
      // console.log(res);
if(res.status !== 0){
  return layer.msg('更新分类数据失败!');
}
//  请求成功后 先关闭弹出层 再刷新表格里的数据
layer.msg('更新分类数据成功!');
// 关闭弹出层
layer.close(indexEdit);
// 刷新表格里的数据
initArtCateList();
    }
  })
})


// 6.1为删除绑定事件  代理方式
$('tbody').on('click','.btn-delete',function () {
  // console.log(1);

//  6.2根据自定义属性 data-id="{{$value.Id}}" 获取按钮值
//拿到每行数据的id 根据id删除对应数据 

var id = $(this).attr('data-id');
// 6.3提示用户是否要删除

layer.confirm('确认删除?', {icon: 3, title:'提示'},function (index) {
// 6.4 点击删除发起ajax请求删除数据
  $.ajax({
    method:'GET',
    url:'/my/article/deletecate/'+ id,
    success:function (res) {
      // console.log(res);
      if(res.status !== 0){
        return layer.msg('删除分类失败!');
      }
      layer.msg('删除分类成功!');
      // 6.4删除完 关掉弹出层 

      layer.close(index);
// 6.5刷新数据

      initArtCateList();
    }
  })
})

})
});
